<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="穷在闹市" />
		<!-- 作者 -->
		<meta name="revised" content="穷在闹市.v3, 2019/05/01" />
		<!-- 定义页面的最新版本 -->
		<meta name="description" content="网站简介" />
		<!-- 网站简介 -->
		<meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
		<title>穷在闹市出品</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
		<script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
		<script type="text/javascript" src="/layui/layui.js"></script>
		<script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->

	</head>

	<body>
		<div class="cBody">
			<div class="console">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="name" required lay-verify="required" placeholder="输入分管名称" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn" lay-submit lay-filter="submitBut">检索</button>
					</div>
				</form>

				<script>
					layui.use('form', function() {
						var form = layui.form;
				
						//监听提交
						form.on('submit(submitBut)', function(data) {
							layer.msg(JSON.stringify(data.field));
							return false;
						});
					});
				</script>
			</div>
			
			<table class="layui-table" id="category_table">

			</table>
			
			<!-- layUI 分页模块 -->
			<div class="h_55"></div>
			<div id="pages"></div>
			<script>
				layui.use(['laypage', 'layer','table'], function() {
					var laypage = layui.laypage,
						layer = layui.layer,
						table = layui.table;
				
					//总页数大于页码总数
					laypage.render({
					    elem: 'pages'
					    ,count: 10
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
					    ,jump: function(obj){

					    }
					});
                    table.render({
                        elem: '#category_table'
                        ,url:'/category/queryCategories'
                        ,toolbar: true
                        ,title: '分类表'
                        ,totalRow: true
                        ,cols: [[
                            {field:'isParent', title:'级别', width:120, edit: 'text'}
                            ,{field:'name', title:'名称', width:120, edit: 'text'}
                        ]]
                        ,page: true
                        ,response: {
                            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                        }
                        ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                           var data= dataChange(res.extend.list);
                            return {
                                "code": res.code, //解析接口状态
                                "msg": "", //解析提示文本
                                "count": data.length, //解析数据长度
                                "data": data //解析数据列表
                            };
                        }
                    });
				});
				//数据转化
				function dataChange(data) {
					for(var i=0; i<data.length; i++){
					    data[i].isParent = data[i].isParent == "0"?"一级分类":"二级分类"
					}
					return data;
                }
				//获取分类
				function getCateogies() {
					$.ajax({
						url:"/category/queryCategories",
						type:'post',
						success:function (res) {
						    var data;
							if(res.code == "200"){
							    data = res.extend.list;
							}
                        }
					})
                }
			</script>
		</div>
	</body>

</html>